<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
            *{margin:0;padding:0;border:none;}
        </style>
        <script src="jquery.min.js"></script>
    </head>
    <body>
        <style>
            #cvout{width:100vw;max-height:100vh;background:#351;overflow:hidden;position:relative;}
            #canvas{position:absolute;bottom:0;left:0;}
        </style>
        <div id="cvout">
            <div id="bottomtool" style="position:absolute;right:50%;height:60px;width:0;bottom:0;z-index:0;color:#fff;text-align:center;">
                <div style="width:400px;height:60px;background:#88888855;margin-left:-200px;font-size:0;">
                    <style>
                        .jnitem{position: relative;overflow: hidden;display:inline-block;font-size:12px;width:50px;height:50px;border:3px solid #888;color:#888;background:#ccc;}
                        .jnitem.shot .waitf{content: "";display: inline-block;width:50px;height:50px;position: absolute;top:0;left:0;background:#666;}
                        .jnitem.shot.wait .waitf{top:50px;}
                    </style>
                    <div class="jnitem jn1"><div class="waitf"></div>技能一</div>
                    <div class="jnitem jn2"><div class="waitf"></div>技能二</div>
                    <div class="jnitem jn3"><div class="waitf"></div>技能三</div>
                    <div class="jnitem jn4"><div class="waitf"></div>技能四</div>
                </div>
            </div>
            <canvas id="canvas" class="canvas">当前浏览器不支持canvas标签，请更换浏览器重新尝试</canvas>
        </div>
        <div id="htmldiv" style="width:100%;max-height:100vh;overflow:hidden;position:fixed;top:0;color:#fff;">
            <div id="wscountdiv"></div>
            <div id="joindiv">
                <select>
                    <option value="0">0</option>
                </select>
                <button class="">进入准备</button>
            </div>
            <div id="startdiv">
                <div id="joinlist"></div>
                <button style="display:none;">准备好了</button>
            </div>
            <div id="enddiv" style="display:none;">
            </div>
        </div>
        <script>
            
            var stopi = 30000;
            function gray(){
                var style = ('html {-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); _filter:none; }');
                var st = '<style id="graystyle">' + style + '</style>';
                $(st).prependTo('body');
                setTimeout(function(){
                    $('#graystyle').remove();
                }, stopi);
            }

            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            canvas.width = 2520;
            canvas.height = 2520;
            $('#cvout').height($(window).height());
            var cvoutW = $('#cvout').width();
            var cvoutH = $('#cvout').height();
            var cvW = $('#canvas').width();
            var cvH = $('#canvas').height();
            var setCvPos = function () {
                var obj = tanks[tanki];
                var l = 0, t = 0;
                l = cvoutW / 2 - obj.x;
                t = cvoutH / 2 - obj.y;
                if (l > 0) {
                    l = 0
                }
                if (l < cvoutW - cvW) {
                    l = cvoutW - cvW
                }
                if (t > 0) {
                    t = 0
                }
                if (t < cvoutH - cvH) {
                    t = cvoutH - cvH
                }
                var css = {};
                var cl = parseInt($('#canvas').css('left'));
                var ct = parseInt($('#canvas').css('top'));
                var bf = 50;
                if(Math.abs(l - cl) > bf){
                    css.left = l + (l < cl ? 1 : -1) * bf;
                }
                if(Math.abs(t - ct) > bf){
                    css.top = t + (t < ct ? 1 : -1) * bf;
                }
                $('#canvas').css(css);
            };
            $(window).resize(function () {
                $('#cvout').height($(window).height());
                cvoutW = $('#cvout').width();
                cvoutH = $('#cvout').height();
                cvW = $('#canvas').width();
                cvH = $('#canvas').height();
                setCvPos();
            });
            var Fes = [
                []
            ];
            for (_i = 55, _j = 40; _i < 180; _i++) {
                Fes[0][Fes[0].length] = {x: _i, y: _j};
                Fes[0][Fes[0].length] = {x: _i + 17, y: _j + 170};
                Fes[0][Fes[0].length] = {x: _j + 170, y: _i + 15};
                Fes[0][Fes[0].length] = {x: _j, y: _i};
            }
            for (_i = 55, _j = 40; _i < 125; _i++, _j += 0.8) {
                Fes[0][Fes[0].length] = {x: _i, y: _j};
                Fes[0][Fes[0].length] = {x: 72 + _i, y: 114 + _j};
            }
            for (_i = 180, _j = 40; _i > 123; _i--, _j++) {
                Fes[0][Fes[0].length] = {x: _i, y: _j};
                Fes[0][Fes[0].length] = {x: _i - 53, y: 114 + _j};
            }
            for (_i = 210, _j = 69; _i > 150; _i--, _j++) {
                Fes[0][Fes[0].length] = {x: _i, y: _j};
                Fes[0][Fes[0].length] = {x: _j - 29, y: _i - 30};
            }
            for (_i = 210, _j = 195; _i > 150; _i -= 0.9, _j--) {
                Fes[0][Fes[0].length] = {x: _i, y: _j};
                Fes[0][Fes[0].length] = {x: _i - 110, y: _j - 75};
            }
            //初始化地图选取
            var pic = 0;
        </script>
        <script>
            var playerConf = [
                {p:0},
                {p:0},
                {p:0},
                {p:0},
                {p:0},
                {p:0},
                {p:0},
                {p:0},
                {p:0},
                {p:0}
            ];
            //团队
            var teams = [0, 1];
            //所属团队
            var teami = 0;
            //控制角色
            var tanki = 0;
            //定义坦克数组
            var tanks = [
                {x: 20, y: canvas.height - 60, v: 1, l: 20, h: 50, d: 1, i: 0, up: [38, false], right: [39, false], down: [40, false], left: [37, false], shot: [32, false], t: 6, inter: 1000, team: 0},
                {x: 40, y: canvas.height - 30, v: 1, l: 20, h: 50, d: 2, i: 0, up: [87, false], right: [68, false], down: [83, false], left: [65, false], shot: [192, false], t: 6, inter: 1000, team: 0},
                {x: 40, y: canvas.height - 30, v: 1, l: 20, h: 50, d: 2, i: 0, up: [87, false], right: [68, false], down: [83, false], left: [65, false], shot: [192, false], t: 6, inter: 1000, team: 0},
                {x: 40, y: canvas.height - 30, v: 1, l: 20, h: 50, d: 2, i: 0, up: [87, false], right: [68, false], down: [83, false], left: [65, false], shot: [192, false], t: 6, inter: 1000, team: 0},
                {x: 40, y: canvas.height - 30, v: 1, l: 20, h: 50, d: 2, i: 0, up: [87, false], right: [68, false], down: [83, false], left: [65, false], shot: [192, false], t: 6, inter: 1000, team: 0},
                {x: 40, y: canvas.height - 30, v: 1, l: 20, h: 50, d: 2, i: 0, up: [87, false], right: [68, false], down: [83, false], left: [65, false], shot: [192, false], t: 6, inter: 1000, team: 1},
                {x: 40, y: canvas.height - 30, v: 1, l: 20, h: 50, d: 2, i: 0, up: [87, false], right: [68, false], down: [83, false], left: [65, false], shot: [192, false], t: 6, inter: 1000, team: 1},
                {x: 40, y: canvas.height - 30, v: 1, l: 20, h: 50, d: 2, i: 0, up: [87, false], right: [68, false], down: [83, false], left: [65, false], shot: [192, false], t: 6, inter: 1000, team: 1},
                {x: 40, y: canvas.height - 30, v: 1, l: 20, h: 50, d: 2, i: 0, up: [87, false], right: [68, false], down: [83, false], left: [65, false], shot: [192, false], t: 6, inter: 1000, team: 1},
                {x: 40, y: canvas.height - 30, v: 1, l: 20, h: 50, d: 2, i: 0, up: [87, false], right: [68, false], down: [83, false], left: [65, false], shot: [192, false], t: 6, inter: 1000, team: 1}
            ];
            //正常生命值
            var tankH = 100;
            //定义坦克初始位置
            var tanksPosition = [[
                    {x: 100, y: canvas.height - 100},
                    {x: 80, y: canvas.height - 100},
                    {x: 100, y: canvas.height - 80},
                    {x: 60, y: canvas.height - 90},
                    {x: 90, y: canvas.height - 60}
                ],
                [
                    {x: canvas.width - 100, y: 100},
                    {x: canvas.width - 80, y: 100},
                    {x: canvas.width - 100, y: 80},
                    {x: canvas.width - 60, y: 90},
                    {x: canvas.width - 90, y: 60}
                ]
            ];
            //绑定坦克初始位置、颜色
            var tanksColor = ['#0cc', '#0f0'];
            var _tanksInitXyto = [
                {xto:200,yto:200,xto2:canvas.width-200,yto2:200},
                {xto:200,yto:200,xto2:canvas.width-200,yto2:200},
                {xto:canvas.width - 200,yto:200},
                {xto:canvas.width - 200,yto:200},
                {xto:canvas.width - 200,yto:canvas.height - 200,xto2:canvas.width-200,yto2:200},
                {xto:200,yto:200,xto2:200,yto2:canvas.height - 200},
                {xto:200,yto:200,xto2:200,yto2:canvas.height - 200},
                {xto:200,yto:canvas.height - 200},
                {xto:200,yto:canvas.height - 200},
                {xto:canvas.width - 200,yto:canvas.height - 200,xto2:200,yto2:canvas.height - 200},
            ];
            var tanksInitXyto = function(i){
                if(playerConf[i] && playerConf[i].p != 1){
                    $.each(_tanksInitXyto[i], function(_i, _v){
                        tanks[i][_i] = _v;
                    });
                }
            };
            var setplayerConf = function(i){
                $.each(playerConf[i], function(_i, _v){
                    tanks[i][_i] = _v;
                });
            };
            var tankJnarr = ['jn1','jn2','jn3','jn4'];
            function _initTanks(){
            $.each(tanks, function (i, v) {
                tanks[i].x = tanks[i].cx = tanksPosition[v.team][i % 5].x;
                tanks[i].y = tanks[i].cy = tanksPosition[v.team][i % 5].y;
                tanks[i].color = tanksColor[v.team];
                tanks[i].s = 100;
                tanks[i].hl = tankH;
                tanks[i].jh = 2;
                tanks[i].v = 1.5;
                tanks[i].show = 1;
                //keycode, 按下, 是否可以执行, 冷却时间ms, 攻击距离, 减红量, 消耗魔法值, 大小, 需要左键执行, 可以击穿
                tanks[i].jn1 = [49, false, 0, 2000, 800, 20, 20, 45, 0, 0];
                tanks[i].jn2 = [50, false, 0, 5000, 800, 20, 20, 45, 0, 0];
                tanks[i].jn3 = [51, false, 0, 10000, 800, 20, 20, 50, 0, 1];
                tanks[i].jn4 = [52, false, 0, 20000, 800, 20, 20, 60, 1, 1];
                resetTarget(i);
                tanksInitXyto(i);
                setplayerConf(i);
            });
            //x,y:坦克坐标;v:坦克移动的速度,l:坦克的边长,h:坦克的生命值,d:坦克的方向（1：上，2：右，3：下，4：左）,i:坦克是否可以发射炮弹（0：是，1：否）,up,right,down,left,shot:坦克各方向按键对应键码及按键状态,t:炮弹每t毫秒移动一次,inter:坦克发射炮弹的时间间隔,color:坦克颜色
            //自动回血/回蓝
            setInterval(function(){
                $.each(tanks, function (i, v) {
                    if(tanks[i].h < tankH){
                        if(tanks[i].hadd != 1){
                            tanks[i].hadd = 1;
                            setTimeout(function(){
                                tanks[i].hadd = 0;
                                tanks[i].h+=10;
                                tanks[i].h = tanks[i].h >= tankH ? tankH : tanks[i].h;
                            }, 5000);
                        }
                    }else{
                        tanks[i].hadd = 0;
                    }
                    if(tanks[i].hl < tankH){
                        if(tanks[i].hladd != 1){
                            tanks[i].hladd = 1;
                            setTimeout(function(){
                                tanks[i].hladd = 0;
                                tanks[i].hl+=10;
                                tanks[i].hl = tanks[i].hl >= tankH ? tankH : tanks[i].hl;
                            }, 3000);
                        }
                    }else{
                        tanks[i].hladd = 0;
                    }
                });
            }, 100);
                    
            if(!_updateTanki){
                var _updateTanki = 0;
            }
            if(window.$session == window.$sersock){
                setInterval(function(){
                    if(_updateTanki == 0){
                        _updateTanki = 1;
                        setTimeout(function(){
                            _updateTanki = 0;
    //                                var updatejson = {x:tanks[tanki].x,y:tanks[tanki].y};
                            $.each(tanks, function (i, v) {
                                updateTanki(i, v);
                            });
                            _sock.sendMsg(1);
                        }, 1000);
                    }
                }, 100);
            }
            }

            //定义炮弹数组
            var bullets = [];
            //新生炮弹占用元素索引
            var bulletcc = 0;
            //炮弹占用元素数量
            var bulletccz = 200;
            //定义木头宽度
            var woodLength = 10;
            //定义铁块宽度
            var Felength = 10;
            //定义旗的宽度
            var flagLength = 50;
            //旗的初始生命值
            var flagH = 150;
            var flags = [
                {x: 200, y: canvas.height - 200, l: flagLength * 2, h: flagH * 2, team: 0, lead: 1},
                {x: 200, y: canvas.height - 300, l: flagLength, h: flagH, team: 0},
                {x: 300, y: canvas.height - 200, l: flagLength, h: flagH, team: 0},
                {x: 200, y: canvas.height * 4 / 5, l: flagLength, h: flagH, team: 0},
                {x: canvas.width * 1 / 5, y: canvas.height - 200, l: flagLength, h: flagH, team: 0},
                {x: canvas.width * 1 / 6, y: canvas.height - 400, l: flagLength, h: flagH, team: 0},
                {x: 300, y: canvas.height - 200, l: flagLength, h: flagH, team: 0},
                {x: canvas.width * 1 / 4, y: canvas.height * 2.95 / 4, l: flagLength, h: flagH, team: 0},
                {x: canvas.width * 1.4 / 4, y: canvas.height * 2.55 / 4, l: flagLength, h: flagH, team: 0},
                {x: 200, y: canvas.height * 3 / 5, l: flagLength, h: flagH, team: 0},
                {x: 200, y: canvas.height * 1.15 / 4, l: flagLength, h: flagH, team: 0},
                {x: canvas.width * 2 / 5, y: canvas.height - 200, l: flagLength, h: flagH, team: 0},
                {x: canvas.width * 2.85 / 4, y: canvas.height - 200, l: flagLength, h: flagH, team: 0},
                {x: canvas.width - 200, y: 200, l: flagLength * 2, h: flagH * 2, team: 1, lead: 1},
                {x: canvas.width - 200, y: 300, l: flagLength, h: flagH, team: 1},
                {x: canvas.width - 300, y: 200, l: flagLength, h: flagH, team: 1},
                {x: canvas.width - 200, y: canvas.height * 1 / 5, l: flagLength, h: flagH, team: 1},
                {x: canvas.width * 4 / 5, y: 200, l: flagLength, h: flagH, team: 1},
                {x: canvas.width * 5 / 6, y: 400, l: flagLength, h: flagH, team: 1},
                {x: canvas.width * 3 / 5, y: 200, l: flagLength, h: flagH, team: 1},
                {x: canvas.width * 1.15 / 4, y: 200, l: flagLength, h: flagH, team: 1},
                {x: canvas.width - 200, y: canvas.height * 2.85 / 4, l: flagLength, h: flagH, team: 1},
                {x: canvas.width - 200, y: canvas.height * 2 / 5, l: flagLength, h: flagH, team: 1},
                {x: canvas.width * 3 / 4, y: canvas.height * 0.95 / 4, l: flagLength, h: flagH, team: 1},
                {x: canvas.width * 2.6 / 4, y: canvas.height * 1.35 / 4, l: flagLength, h: flagH, team: 1}
            ];
            $.each(flags, function (i, v) {
                flags[i].color = tanksColor[v.team];
                flags[i].s = 300;
                flags[i].t = 10;
                flags[i].i = 0;
                flags[i].jh = 15;
                flags[i].inter = 1000;
                flags[i].show = 1;
            });
            //定义道具边长
            var propLength = 15;
            //定义不同的坦克AI
            var tankAiModel = [
                {v: 1, h: 2, s: 200, l: 25, inter: 1000, t: 10, color: '#f00'}, //炮弹t毫秒移动一次
                {v: 1, h: 2, s: 50, l: 15, inter: 1000, t: 10, color: '#ccc'},
                {v: 1, h: 2, s: 50, l: 15, inter: 1000, t: 10, color: '#ccc'},
                {v: 1, h: 2, s: 50, l: 15, inter: 1000, t: 10, color: '#ccc'},
                {v: 1, h: 2, s: 50, l: 15, inter: 1000, t: 10, color: '#ccc'},
                {v: 1, h: 2, s: 50, l: 15, inter: 1000, t: 10, color: '#ccc'},
                {v: 1, h: 2, s: 50, l: 15, inter: 1000, t: 10, color: '#ccc'}
            ];
            $.each(tankAiModel, function (i, v) {
                tankAiModel[i].show = 1;
                tankAiModel[i].v = 1;
            });
            //游戏结束声明
            var end = false;
            //储存坦克AI的数组
            var tanksAi = [];
            //新生坦克AI占用元素索引
            var tanksAicc = 0;
            //坦克AI占用元素数量
            var tanksAiccz = 300;
            //定义道具标签
            var randomProp = [{t: 'T+', c: '#6cc'}, {t: 'T-', c: '#0c3'}, {t: 'H+', c: '#c60'}, {t: 'V+', c: '#c0c'}, {t: 'S+', c: '#666'}, {t: 'S-', c: '#c9c'}];
            //道具T+:坦克变大T-:坦克变小H+:生命加一V+:坦克速度变快S+:炮弹速度变快S-:炮弹发射间隔减短
            //定义道具数组
            var props = [];
            //新生炮弹占用元素索引
            var propscc = 0;
            //炮弹占用元素数量
            var propsccz = 20;

            function updateTanki(tanki, tank){
                if(window.$session == window.$sersock){
                    var json = ['updateTanki',tanki,{x:parseInt(tank.x),y:parseInt(tank.y),h:tank.h,hl:tank.hl,stop:tank.stop}];
                    _sock.sendMsg(json);
                    return;
                }
//                if(window.tanki == tanki){
//                    var json = {_func:'updateTanki',tanki:tanki,tank:{x:tank.x,y:tank.y}};
//                    _sock.sendMsg(json);
//                }else{
                    if(Math.abs(tanks[tanki].x - tank.x) > 10){
                        tanks[tanki].x = tank.x;
                    }
                    if(Math.abs(tanks[tanki].y - tank.y) > 10){
                        tanks[tanki].y = tank.y;
                    }
                    tanks[tanki].h = tank.h;
                    tanks[tanki].hl = tank.hl;
                    tanks[tanki].stop = tank.stop;
//                }
            }

            function updateFlagi(flagi, flag){
                if(window.$session == window.$sersock){
                    var json = ['updateFlagi',flagi,flag];
                    _sock.sendMsg(json);
                    return;
                }
                flags[flagi] = flag;
            }
            function setXYto(tanki, xto, yto) {
                tanks[tanki].xto = xto;
                tanks[tanki].yto = yto;
                if(window.tanki == tanki){
                    var json = ['setXYto',tanki,xto,yto];
                    _sock.sendMsg(json);
                }
            }
            function resetXYto(tanki) {
                tanks[tanki].xto = 0;
                tanks[tanki].yto = 0;
                if(window.tanki == tanki){
                    var json = ['resetXYto',tanki];
                    _sock.sendMsg(json);
                }
            }
            function setTarget(tanki, xto, yto) {
                tanks[tanki].txto = xto;
                tanks[tanki].tyto = yto;
                tanks[tanki].tytoObj = {};
                tanks[tanki].tytoObji = null;
                var arr = [tanks, tanksAi, flags];
                $.each(arr, function(_i, aobj){
                    for (var i = 0; i < aobj.length; i++) {
                        if (Math.abs(aobj[i].x - xto) < aobj[i].l && Math.abs(aobj[i].y - yto) < aobj[i].l) {
                            tanks[tanki].tytoObj = aobj[i];
                            tanks[tanki].tytoObji = i;
                            console.log(aobj[i]);
                            tanks[tanki].shot[1] = true;
                            return false;
                        }
                    }
                });
                if(window.tanki == tanki){
                    var json = ['setTarget',tanki,xto,yto];
                    _sock.sendMsg(json);
                }
            }
            function getTarget(tanki) {
                var xto = tanks[tanki].txto;
                var yto = tanks[tanki].tyto;
                if (tanks[tanki].tytoObj && tanks[tanki].tytoObj.x) {
                    var xto = tanks[tanki].tytoObj.x;
                    var yto = tanks[tanki].tytoObj.y;
                }
                return {x: xto, y: yto, xto: xto, yto: yto, obj: tanks[tanki].tytoObj, obji: tanks[tanki].tytoObji};
            }
            function resetTarget(tanki) {
                tanks[tanki].txto = 0;
                tanks[tanki].tyto = 0;
                tanks[tanki].tytoObj = {};
                tanks[tanki].tytoObji = null;
                tanks[tanki].shot[1] = false;
                if(window.tanki == tanki){
                    var json = ['resetTarget',tanki];
                    _sock.sendMsg(json);
                }
            }
            //射击间隔
            function shotInterval(obj) {//坦克的索引，对应的坦克数组
                setTimeout(function () {
                    if (obj)
                        obj.i--;
                }, obj.inter);
            }
            //射击间隔
            function jnInterval(obj) {//坦克的索引，对应的坦克数组
                setTimeout(function () {
                    if (obj)
                        obj[2]--;
                }, obj[3]);
            }
            //按键按下对应改变按键状态
            function codeChange() {
                document.onkeydown = function () {
                    var e = event || window.event;
                    for (var i = 0; i < tanks.length; i++) {
                        (function (i) {
                            if (e.keyCode == tanks[i].left[0])
                            {
                                codeReset(i);
                                tanks[i].left[1] = true;
                            }
                            else if (e.keyCode == tanks[i].up[0])
                            {
                                codeReset(i);
                                tanks[i].up[1] = true;
                            }
                            else if (e.keyCode == tanks[i].right[0])
                            {
                                codeReset(i);
                                tanks[i].right[1] = true;
                            }
                            else if (e.keyCode == tanks[i].down[0])
                            {
                                codeReset(i);
                                tanks[i].down[1] = true;
                            }
                            if ((e.keyCode == tanks[i].shot[0]) && (tanks[i].i == 0)) {
                                tanks[i].shot[1] = true;
                            }
                        })(i);
                    }
                    $.each(tankJnarr, function(_i,jni){
                        if ((e.keyCode == tanks[tanki][jni][0]) && (tanks[tanki][jni][2] == 0)) {
                            tanks[tanki][jni][1] = true;
                            if (tanks[tanki][jni][8] == 0) {
                                var target = getTarget(tanki);
                                if(!target.obj){
                                    return;
                                }
                                var jl = l(tanks[tanki].x, tanks[tanki].y, target.x, target.y);
                                var xjl = target.x - tanks[tanki].x;
                                var yjl = target.y - tanks[tanki].y;
                                var tx = tanks[tanki].x + xjl * (tanks[tanki][jni][4] / jl);
                                var ty = tanks[tanki].y + yjl * (tanks[tanki][jni][4] / jl);
                                var t = {x:parseInt(tx), y:parseInt(ty)};
                                var json = ['jnshot',tanki,t,jni];
                                _sock.sendMsg(json);
                                return false;
                            }
                        }
                    });
                }
                document.onkeyup = function () {
                    var e = event || window.event;
                    for (var i = 0; i < tanks.length; i++) {
                        (function (i) {
                            if (e.keyCode == tanks[i].left[0])
                            {
                                tanks[i].left[1] = false;
                            }
                            else if (e.keyCode == tanks[i].up[0])
                            {
                                tanks[i].up[1] = false;
                            }
                            else if (e.keyCode == tanks[i].right[0])
                            {
                                tanks[i].right[1] = false;
                            }
                            else if (e.keyCode == tanks[i].down[0])
                            {
                                tanks[i].down[1] = false;
                            }
                            if (e.keyCode == tanks[i].shot[0]) {
                                tanks[i].shot[1] = false;
                            }
                        })(i);
                    }
                    $.each(tankJnarr, function(_i,jni){
                        if (e.keyCode == tanks[tanki][jni][0]) {
                            tanks[tanki][jni][1] = false;
                        }
                    });
                }
                canvas.oncontextmenu = function (ev) {
                    ev.preventDefault();
                    var ex = ev.clientX - parseInt($('#canvas').css('left'));
                    var ey = ev.clientY - parseInt($('#canvas').css('top'));
                    setXYto(tanki, ex, ey);
                }
                canvas.onclick = function (ev) {
                    ev.preventDefault();
                    var ex = ev.clientX - parseInt($('#canvas').css('left'));
                    var ey = ev.clientY - parseInt($('#canvas').css('top'));
                    for(i in tankJnarr){
                        var jni = tankJnarr[i];
                        if ((tanks[tanki][jni][8] == 1) &&(tanks[tanki][jni][1] == true) && (tanks[tanki][jni][2] == 0)) {
                            var jl = l(tanks[tanki].x, tanks[tanki].y, ex, ey);
                            var xjl = ex - tanks[tanki].x;
                            var yjl = ey - tanks[tanki].y;
                            var tx = tanks[tanki].x + xjl * (tanks[tanki][jni][4] / jl);
                            var ty = tanks[tanki].y + yjl * (tanks[tanki][jni][4] / jl);
                            var t = {x:parseInt(tx), y:parseInt(ty)};
                            var json = ['jnshot',tanki,t,jni];
                            _sock.sendMsg(json);
                            return;
                        }
                    }
                    setTarget(tanki, ex, ey);
                }
            }
            //重置按钮状态
            function codeReset(i) {//坦克索引
                tanks[i].up[1] = false;
                tanks[i].right[1] = false;
                tanks[i].left[1] = false;
                tanks[i].down[1] = false;
            }
            function l(x, y, xto, yto) {
                var _txl = xto - x;
                var _tyl = yto - y;
                var _txyl = Math.sqrt(_txl * _txl + _tyl * _tyl);
                return _txyl;
            }
            //攻击
            function jnshot(tanki, target, jni) {
                if($sersock == $session){
                var obj = tanks[tanki];
                if (obj.show == 0) {
                    return;
                }
                if (obj.hl < obj[jni][6]) {
                    return;
                }
                var jh = obj[jni][5];
                obj.hl -= obj[jni][6];
                obj[jni][2] = 1;
                jnInterval(obj[jni]);
                bulletcc = bulletcc >= bulletccz ? 0 : bulletcc;
                var _bl = bulletcc++;
                var _s = obj[jni][4];
                var _v = 10;
                var bullet = {_bl:_bl, s: _s, v: _v, xto: target.x, yto: target.y, x: parseInt(obj.x), y: parseInt(obj.y), l: obj[jni][7], jc: obj[jni][9], jni:jni, tki:tanki, t: obj.t, team: obj.team};
                bullet.jh = jh;
                var json = ['shot',bullet];
                _sock.sendMsg(json);
                return 1;
                }
            }
            //攻击
            function shot(obj, target) {
                if($sersock == $session){
                if (obj.show == 0) {
                    return;
                }
                if (target.show == 0) {
                    return;
                }
                if (obj.i > 0) {
                    return;
                }
                if (obj.hl === 0) {
                    return;
                }
                var jh = obj.jh ? obj.jh : 1;
                if (obj.hl < jh) {
                    return;
                }
                if(obj.team == target.team) {
                    return;
                }
                if (l(obj.x, obj.y, target.x, target.y) >= obj.s) {
                    return;
                }
                obj.hl -= jh;
                obj.i = 1;
                shotInterval(obj);
                bulletcc = bulletcc >= bulletccz ? 0 : bulletcc;
                var _bl = bulletcc++;
                var _s = 100;
                if (obj.s > 0) {
                    _s = obj.s;
                }
                var _v = 10;
                if (obj.v > 0) {
                    _v = obj.v*3;
                }
                var bullet = {_bl:_bl, s: _s, v: _v, xto: 0, yto: 0, x: parseInt(obj.x), y: parseInt(obj.y), l: parseInt(obj.l / 3), jc: 0, t: obj.t, team: obj.team};
                //x,y:炮弹的坐标,xto,yto:终点，xi，yi：初始坐标，l:炮弹的边长，s:攻击距离，t:炮弹每隔t毫秒移动一次，color:炮弹的颜色，炮弹所属坦克,jc:击穿
                var _txl = target.x - bullet.x;
                var _tyl = target.y - bullet.y;
                var _txyl = Math.sqrt(_txl * _txl + _tyl * _tyl);
                bullet.xto = bullet.x + parseInt(_txl / _txyl * _s);
                bullet.yto = bullet.y + parseInt(_tyl / _txyl * _s);
                bullet.jh = jh;
//                bullet._func = 'shot';
                var json = ['shot',bullet];
                _sock.sendMsg(json);
                return 1;
//                bullets[_bl] = bullet;
//                bulletsMove(bullets[_bl], 1, 1, _bl);
                }
            }
            function _shot(json){
                var _bl = json._bl;
                var bullet = {};
                $.each(json,function(i,v){
                    bullet[i] = v;
                });
                bullet.l = bullet.l < 25 ? 25 : bullet.l;
                bullet.show = 1;
                bullet.xi = json.x;
                bullet.yi = json.y;
//                bullet.color = '#f00';
                bullet.color = tanksColor[bullet['team']];
                bullets[_bl] = bullet;
//                bullets[_bl] = {show: 1, s: _s, v: _v, xto: 0, yto: 0, xi: obj.x, yi: obj.y, x: obj.x, y: obj.y, l: obj.l / 3, t: obj.t, color: '#f00', team: obj.team};
                bulletsMove(bullets[_bl], 1, 1, _bl);
                if(json.jni){
                    if(json.tki == tanki){
                        $('.jnitem.' + json.jni).addClass('shot');
                        $('.jnitem.' + json.jni + ' .waitf').animate({top:"50px"}, tanks[json.tki][json.jni][3], function(){
                            $('.jnitem.' + json.jni + ' .waitf').css('top', '0');
                            $('.jnitem.' + json.jni).removeClass('shot');
                        });
                    }
                }
            }
            //玩家坦克的移动
            function playerTanksMove(i)//坦克索引
            {
                if (i == tanki) {
                    setCvPos();
                }
                if(tanks[i].stop == 1){
                    return;
                }
                var _xto = _yto = 0;
                if (tanks[i].xto > 0 || tanks[i].yto > 0) {
                    if (Math.abs(tanks[i].xto - tanks[i].x) >= 1) {
                        _xto = tanks[i].xto > tanks[i].x ? 1 : -1;
                    }
                    if (Math.abs(tanks[i].yto - tanks[i].y) >= 1) {
                        _yto = tanks[i].yto > tanks[i].y ? 1 : -1;
                    }
                }
                if (tanks[i].up[1] == true)
                {
                    _yto = -1;
                    resetXYto(tanki);
                    tanks[i].d = 1;
                    //		tanksMove(i,0,-1,'player');
                }
                else if (tanks[i].right[1] == true)
                {
                    _xto = 1;
                    resetXYto(tanki);
                    tanks[i].d = 2;
                    //		tanksMove(i,1,0,'player');
                }
                else if (tanks[i].down[1] == true)
                {
                    _yto = 1;
                    resetXYto(tanki);
                    tanks[i].d = 3;
                    //		tanksMove(i,0,1,'player');
                }
                else if (tanks[i].left[1] == true)
                {
                    _xto = -1;
                    resetXYto(tanki);
                    tanks[i].d = 4;
                    //		tanksMove(i,-1,0,'player');
                }
                if ((tanks[i].shot[1] == true) && (tanks[i].i == 0) && getTarget(i).obj.show && (getTarget(i).obj.team != tanks[i].team))
                {
                    shot(tanks[i], getTarget(i).obj);
                }
                
                if(tanks[i].p != 1){
                    var _sh = 0;
                    var arr = [tanks, tanksAi, flags];
                    $.each(arr, function (_i, aobj) {
                        for (var j = 0; j < aobj.length; j++) {
                            if (aobj[j].show == 0) {
                                continue;
                            }
                            if (tanks[i].team == aobj[j].team) {
                                continue;
                            }
                            if ((Math.abs(aobj[j].x - tanks[i].x) <= tanks[i].s) && (Math.abs(aobj[j].y - tanks[i].y) <= tanks[i].s)) {
                                if (l(aobj[j].x, aobj[j].y, tanks[i].x, tanks[i].y) <= tanks[i].s) {
                                    shot(tanks[i], aobj[j]);
                                    _sh = 1;
                                    return false;
                                }
                            }
                        }
                    });
                    if (_sh) {
                        return;
                    }
                }
                if (_xto != 0 || _yto != 0) {
                    if (Math.abs(_xto) == 1 && Math.abs(_yto) == 1) {
                        var _xl = tanks[i].xto - tanks[i].x;
                        var _yl = tanks[i].yto - tanks[i].y;
                        var _xyl = Math.sqrt(_xl * _xl + _yl * _yl);
                        var _xto = _xyl > 0 ? _xl / _xyl : 0;
                        var _yto = _xyl > 0 ? _yl / _xyl : 0;
                    }
                    tanksMove(i, _xto, _yto, 'player');
                }
                if (i == tanki) {
//                    setCvPos();
                }
            }
            //AI坦克的移动
            function AImove()
            {
                for (var i = 0, len = tanksAi.length; i < len; i++)
                {
                    var _sh = 0;
                    var arr = [tanks, tanksAi, flags];
                    $.each(arr, function (_i, aobj) {
                        for (var j = 0; j < aobj.length; j++) {
                            if (aobj[j].show == 0) {
                                continue;
                            }
                            if (tanksAi[i].team == aobj[j].team) {
                                continue;
                            }
                            if ((Math.abs(aobj[j].x - tanksAi[i].x) <= tanksAi[i].s) && (Math.abs(aobj[j].y - tanksAi[i].y) <= tanksAi[i].s)) {
                                if (l(aobj[j].x, aobj[j].y, tanksAi[i].x, tanksAi[i].y) <= tanksAi[i].s) {
                                    shot(tanksAi[i], aobj[j]);
                                    _sh = 1;
                                    return false;
                                }
                            }
                        }
                    });
                    if (_sh) {
                        continue;
                    }
                    var _xl = tanksAi[i].xto - tanksAi[i].x;
                    var _yl = tanksAi[i].yto - tanksAi[i].y;
                    var _xyl = Math.sqrt(_xl * _xl + _yl * _yl);
                    var _xto = _xyl > 0 ? _xl / _xyl : 0;
                    var _yto = _xyl > 0 ? _yl / _xyl : 0;
                    tanksMove(i, _xto, _yto, 'AI');
                }
            }
            //坦克的移动
            function tanksMove(i, dx, dy, type)//坦克索引，坦克在x,y正方向上的移动，（0:不移动,1:向正方向移动,-1:向反方向移动)，坦克类型
            {
                if (type == 'AI')
                {
                    tanksAi[i].x += tanksAi[i].v * dx;
                    tanksAi[i].y += tanksAi[i].v * dy;
                    if ((Math.abs(tanksAi[i].x - tanksAi[i].xto) <= tanksAi[i].v) && (Math.abs(tanksAi[i].y - tanksAi[i].yto) <= tanksAi[i].v)) {
//                    if (l(tanksAi[i].x, tanksAi[i].y, tanksAi[i].xto, tanksAi[i].yto) <= tanksAi[i].v) {
                        tanksAi[i].x = tanksAi[i].xto;
                        tanksAi[i].y = tanksAi[i].yto;
                        if (tanksAi[i].xto2) {
                            tanksAi[i].xto = tanksAi[i].xto2;
                            tanksAi[i].yto = tanksAi[i].yto2;
                            tanksAi[i].xto2 = tanksAi[i].yto2 = 0;
                        }
                    }
                    for (var f = 0, flen = Fes[pic].length; f < flen; f++)
                    {
                        if (judgeCrash(tanksAi[i].x, tanksAi[i].y, tanksAi[i].l, Fes[pic][f].x * Felength, Fes[pic][f].y * Felength, Felength))
                        {
                            tanksAi[i].x -= tanksAi[i].v * dx;
                            tanksAi[i].y -= tanksAi[i].v * dy;
                            break;
                        }
                    }
                    if ((tanksAi[i].x < 0) || (tanksAi[i].x + tanksAi[i].l > canvas.width) || (tanksAi[i].y < 0) || (tanksAi[i].y + tanksAi[i].l > canvas.height))
                    {
                        tanksAi[i].x -= tanksAi[i].v * dx;
                        tanksAi[i].y -= tanksAi[i].v * dy;
                    }
                }
                else
                {
                    tanks[i].x += (tanks[i].v * dx);
                    tanks[i].y += (tanks[i].v * dy);
                    if ((Math.abs(tanks[i].x - tanks[i].xto) <= tanks[i].v) && (Math.abs(tanks[i].y - tanks[i].yto) <= tanks[i].v)) {
//                    if (l(tanks[i].x, tanks[i].y, tanks[i].xto, tanks[i].yto) <= tanks[i].v) {
                        tanks[i].x = tanks[i].xto;
                        tanks[i].y = tanks[i].yto;
                        if (tanks[i].xto2) {
                            tanks[i].xto = tanks[i].xto2;
                            tanks[i].yto = tanks[i].yto2;
                            tanks[i].xto2 = tanks[i].yto2 = 0;
                        }
                    }
                    for (var f = 0, flen = Fes[pic].length; f < flen; f++)
                    {
                        if (judgeCrash(tanks[i].x, tanks[i].y, tanks[i].l, Fes[pic][f].x * Felength, Fes[pic][f].y * Felength, Felength))
                        {
                            tanks[i].x -= (tanks[i].v * dx);
                            tanks[i].y -= (tanks[i].v * dy);
                            break;
                        }
                    }
                    for (var f = 0, flen = props.length; f < flen; f++)
                    {
                        if(judgeCrash(tanks[i].x,tanks[i].y,tanks[i].l,props[f].x,props[f].y,propLength))
                        {
                            propsApply(props[f], i);
                            props[f].show=0;
                            props[f].x=-1000;
                            props[f].y=-1000;
                        }
                    }
                    if ((tanks[i].x < 0) || (tanks[i].x + tanks[i].l > canvas.width) || (tanks[i].y < 0) || (tanks[i].y + tanks[i].l > canvas.height))
                    {
                        tanks[i].x -= tanks[i].v * dx;
                        tanks[i].y -= tanks[i].v * dy;
                    }
                }
            }
            var bulletFlag = {};
            //炮弹的移动
            function bulletsMove(bullet, dx, dy, index)//炮弹所属，要移动的炮弹，炮弹在x,y正方向上的移动，（0:不移动,1:向正方向移动,-1:向反方向移动），炮弹的索引
            {
                if (bullet.show == 0) {
                    bullet.x = -1000;
                    bullet.y = -1000;
                    return;
                }
                var _xl = bullet.xto - bullet.x;
                var _yl = bullet.yto - bullet.y;
                var _xyl = Math.sqrt(_xl * _xl + _yl * _yl);
                var dx = _xl / _xyl * bullet.v;
                var dy = _yl / _xyl * bullet.v;
                if (Math.abs(dx) >= Math.abs(_xl)) {
                    bullet.x = bullet.xto;
                    bullet.y = bullet.yto;
                    bullet.show = 0;
                } else {
                    bullet.x += dx;
                    bullet.y += dy;
                }
                var jh = bullet.jh ? bullet.jh : 1;
                for (var t = 0, tlen = flags.length; t < tlen; t++)
                {
                    if (flags[t].show == 0) {
                        continue;
                    }
                    if (bullet.team != flags[t].team && judgeCrash(bullet.x, bullet.y, bullet.l, flags[t].x, flags[t].y, flags[t].l))
                    {
                        if(!bullet.jc){
                        bullet.x = 0 - bullet.l;
                        bullet.y = 0 - bullet.l;
                        }
                        flags[t].h-=jh;
                        if (flags[t].h < 0)
                        {
                            flags[t].x = -1000;
                            flags[t].y = -1000;
                            flags[t].show = 0;
                        }
                        bulletFlag[t] = 1;
                        if (flags[t].h < 0)
                        {
                            if (flags[t].lead == 1) {
                                if (flags[t].team != teami) {
                                    alert('you win');
                                } else {
                                    alert('you lose');
                                }
                                end = true;
                            }
                        }
                        break;
                    }
                }
                for (var t = 0, tlen = tanksAi.length; t < tlen; t++)
                {
                    if (tanksAi[t].show == 0) {
                        continue;
                    }
                    if (bullet.team != tanksAi[t].team)
                    {
                        if (judgeCrash(bullet.x, bullet.y, bullet.l, tanksAi[t].x, tanksAi[t].y, tanksAi[t].l))
                        {
                            if(!bullet.jc){
                                bullet.x = 0 - bullet.l;
                                bullet.y = 0 - bullet.l;
                            }
                            tanksAi[t].h-=jh;
                            if (tanksAi[t].h < 0)
                            {
                                tanksAi[t].l = 0;
                                tanksAi[t].x = -1000;
                                tanksAi[t].y = 0;
                                tanksAi[t].show = 0;
                            }
                            break;
                        }
                    }
                }
                for (var p = 0, plen = tanks.length; p < plen; p++)
                {
                    if (bullet.team != tanks[p].team)
                    {
                        if (judgeCrash(bullet.x, bullet.y, bullet.l, tanks[p].x, tanks[p].y, tanks[p].l))
                        {
                            if(!bullet.jc){
                                bullet.x = -bullet.l;
                                bullet.y = -bullet.l;
                            }
                            tanks[p].h-=jh;
                            if (tanks[p].h < 0 && window.$sersock == window.$session) {
                                tanks[p].x = tanks[p].cx;
                                tanks[p].y = tanks[p].cy;
                                tanks[p].h = tankH;
                                tanks[p].stop = 1;
                                setTimeout(function(){
                                    tanks[p].stop = 0;
                                }, stopi);
                                if(p == tanki){
                                    gray();
                                }
                                resetXYto(p);
                                tanksInitXyto(p);
                                resetTarget(p);
                            }
                            break;
                        }
                    }
                }
                for (var f = 0, flen = Fes[pic].length; f < flen; f++)
                {
                    if (judgeCrash(bullet.x, bullet.y, bullet.l, Fes[pic][f].x * Felength, Fes[pic][f].y * Felength, Felength))
                    {
                        bullet.x = -bullet.l;
                        bullet.y = -bullet.l;
                        break;
                    }
                }
                if (!outOfcContainer(bullet.x, bullet.y, bullet.l, 0, 0, canvas.width, canvas.height)) {
                    setTimeout(function () {
                        bulletsMove(bullet, dx, dy, index);
                    }, bullet.t);
                }
                else
                {
                    bullet.show = 0;
                    bullet.x = -1000;
                    bullet.y = -1000;
                }
            }
            //判断两物体是否碰撞
            function judgeCrash(x1, y1, l1, x2, y2, l2) {//两个物体的左上角坐标和边长
                if (l1 > l2)
                {
                    if ((x2 >= x1) && (x2 <= x1 + l1) && (y2 >= y1) && (y2 <= y1 + l1))
                        return true;
                    else if ((x2 + l2 >= x1) && (x2 + l2 <= x1 + l1) && (y2 >= y1) && (y2 <= y1 + l1))
                        return true;
                    else if ((x2 >= x1) && (x2 <= x1 + l1) && (y2 + l2 >= y1) && (y2 + l2 <= y1 + l1))
                        return true;
                    else if ((x2 + l2 >= x1) && (x2 + l2 <= x1 + l1) && (y2 + l2 >= y1) && (y2 + l2 <= y1 + l1))
                        return true;
                }
                else
                {
                    if ((x1 >= x2) && (x1 <= x2 + l2) && (y1 >= y2) && (y1 <= y2 + l2))
                        return true;
                    else if ((x1 + l1 >= x2) && (x1 + l1 <= x2 + l2) && (y1 >= y2) && (y1 <= y2 + l2))
                        return true;
                    else if ((x1 >= x2) && (x1 <= x2 + l2) && (y1 + l1 >= y2) && (y1 + l1 <= y2 + l2))
                        return true;
                    else if ((x1 + l1 >= x2) && (x1 + l1 <= x2 + l2) && (y1 + l1 >= y2) && (y1 + l1 <= y2 + l2))
                        return true;
                }
                return false;
            }
            //判断是否超出容器
            function outOfcContainer(x, y, l, vx, vy, width, height) { //物体的x,y坐标，边长，速度，容器宽高
                if ((x + vx < 0) || (x + l + vx > width))
                    return true;
                else if ((y + vy < 0) || (y + l + vy > height))
                    return true;
                else
                    return false;
            }


            //道具生效
            function propsApply(props,index) {
                if (props.t == 0) {
                    if (tanks[index].l <= 40) {
                        tanks[index].l += 5;
                    }
                } else if (props.t == 1) {
                    if (tanks[index].l >= 15) {
                        tanks[index].l -= 5;
                    }
                } else if (props.t == 2) {
                    if (tanks[index].h <= 4) {
                        tanks[index].h++;
                    }
                } else if (props.t == 3) {
                    if (tanks[index].v <= 8)
                        tanks[index].v++;
                } else if (props.t == 4) {
                    if (tanks[index].bv < 12)
                        tanks[index].bv++;
                } else if (props.t == 5) {
                    if (tanks[index].inter >= 300)
                        tanks[index].inter -= 50;
                }
            }



            //生成AI坦克
            function tankAiProduce() {
                var l = 20;
                var ar = [0, 1, 2];
                for (var ai in ar) {
                    var av = Math.abs(ar[ai]);
                    for (var ti in teams) {
                        var tv = Math.abs(teams[ti]);
                        for (var i in tankAiModel) {
                            var v = {};
                            for (var tami in tankAiModel[i]) {
                                v[tami] = tankAiModel[i][tami];
                            }
                            if (tv == 0) {
                                var objext = {x: 200, y: canvas.height - 200}
                            } else {
                                var objext = {x: canvas.width - 200, y: 200}
                            }
                            if (tv == 0) {
                                if (av == 0) {
                                    objext.y -= l * i;
                                    objext.xto = 200;
                                    objext.yto = 200;
                                    objext.xto2 = canvas.width - 200;
                                    objext.yto2 = 200;
                                }
                                if (av == 1) {
                                    objext.x += l * i / 1.45;
                                    objext.y -= l * i / 1.45;
                                    objext.xto = canvas.width - 200;
                                    objext.yto = 200;
                                }
                                if (av == 2) {
                                    objext.x += l * i;
                                    objext.xto = canvas.width - 200;
                                    objext.yto = canvas.height - 200;
                                    objext.xto2 = canvas.width - 200;
                                    objext.yto2 = 200;
                                }
                            } else {
                                if (av == 0) {
                                    objext.x -= l * i;
                                    objext.xto = 200;
                                    objext.yto = 200;
                                    objext.xto2 = 200;
                                    objext.yto2 = canvas.height - 200;
                                }
                                if (av == 1) {
                                    objext.x -= l * i / 1.45;
                                    objext.y += l * i / 1.45;
                                    objext.xto = 200;
                                    objext.yto = canvas.height - 200;
                                }
                                if (av == 2) {
                                    objext.y += l * i;
                                    objext.xto = canvas.width - 200;
                                    objext.yto = canvas.height - 200;
                                    objext.xto2 = 200;
                                    objext.yto2 = canvas.height - 200;
                                }
                            }
                            tanksAicc = tanksAicc > tanksAiccz ? 0 : tanksAicc;
                            var _tl = tanksAicc++;
                            tanksAi[_tl] = v;

                            objext.team = tv;
                            objext.a = av;
                            $.each(objext, function (oi, ov) {
                                tanksAi[_tl][oi] = ov;
                            });

                        }
                    }
                }
                setTimeout(tankAiProduce, 50 * 1000);
            }
            //判断随机数出现是否重叠
            function judgeRepeat(x, r) {//坦克的x坐标和边长
                for (var i = 0, len = tanksAi.length; i < len; i++)
                {
                    if (judgeCrash(x, 0, tankAiModel[r].l, tanksAi[i].x, tanksAi[i].y, tanksAi[i].l))
                        return true;//重叠
                }
                return false;
            }


            //定义画出圆角矩形的原型方法
            CanvasRenderingContext2D.prototype.cirRct = function (x, y, w, l, r, color)
            {
                if(!inEye(x, y)){return false;}
                this.beginPath();
                this.moveTo(x + r, y);
                this.lineTo(x + w - r, y);
                this.arcTo(x + w, y, x + w, y + r, r);
                this.lineTo(x + w, y + l - r);
                this.arcTo(x + w, y + l, x + w - r, y + l, r);
                this.lineTo(x + r, y + l);
                this.arcTo(x, y + l, x, y + l - r, r);
                this.lineTo(x, y + r);
                this.arcTo(x, y, x + r, y, r);
                this.fillStyle = color;
                this.closePath();
                this.fill();
                this.stroke();
            }
            //定义画出选择对象的原型方法
            CanvasRenderingContext2D.prototype.drawTankF = function (obj)
            {
                if(!inEye(obj.x, obj.y)){return false;}
                if (obj.l <= 0) {
                    return;
                }
                var vl = obj.l * 0.7;
                this.beginPath();
                this.moveTo(obj.x + vl, obj.y + vl);
                this.arc(obj.x + vl, obj.y + vl, vl / 2, 0, 0.5 * Math.PI);
                this.fillStyle = 'pink';
                this.fill();
                this.stroke();
                this.beginPath();
                this.moveTo(obj.x - vl, obj.y + vl);
                this.arc(obj.x - vl, obj.y + vl, vl / 2, 0.5 * Math.PI, 1 * Math.PI);
                this.fillStyle = 'pink';
                this.fill();
                this.stroke();
                this.beginPath();
                this.moveTo(obj.x - vl, obj.y - vl);
                this.arc(obj.x - vl, obj.y - vl, vl / 2, Math.PI, 1.5 * Math.PI);
                this.fillStyle = 'pink';
                this.fill();
                this.stroke();
                this.beginPath();
                this.moveTo(obj.x + vl, obj.y - vl);
                this.arc(obj.x + vl, obj.y - vl, vl / 2, 1.5 * Math.PI, 2 * Math.PI);
                this.fillStyle = 'pink';
                this.fill();
                this.stroke();
            }
            //定义画出坦克的原型方法
            CanvasRenderingContext2D.prototype.drawTank = function (obj)
            {
                if(!inEye(obj.x, obj.y)){return false;}
                if (obj.show == 0) {
                    return;
                }
                if (obj.l <= 0) {
                    return;
                }
                this.beginPath();
                this.moveTo(obj.x, obj.y);
                this.arc(obj.x, obj.y, obj.l, Math.PI, Math.PI * (1 + obj.hl / tankH));
                this.fillStyle = 'blue';
                this.fill();
                this.stroke();
                this.beginPath();
                this.moveTo(obj.x, obj.y);
                this.arc(obj.x, obj.y, obj.l, 0, Math.PI * obj.h / tankH);
                this.fillStyle = 'red';
                this.fill();
                this.stroke();
                this.beginPath();
                this.moveTo(obj.x, obj.y);
                this.arc(obj.x, obj.y, obj.l - 3, 0, 2 * Math.PI);
                this.fillStyle = 'white';
                this.fill();
                this.stroke();
                this.beginPath();
                this.arc(obj.x, obj.y, obj.l - 5, 0, 2 * Math.PI);
                this.fillStyle = obj.color;
                this.fill();
                this.stroke();
            }
            //定义画出旗的方法
            CanvasRenderingContext2D.prototype.drawFlag = function (obj) {
                if(!inEye(obj.x, obj.y)){return false;}
                var x = obj.x, y = obj.y, l = obj.l;
                this.beginPath();
                this.lineWidth = 2;
                this.arc(obj.x, obj.y, obj.l / 2 + 3, 0, 2 * Math.PI * (obj.h / flagH));
                this.strokeStyle = 'red';
                this.stroke();
                this.lineWidth = 1;
                if (obj.team != teami) {
                    this.beginPath();
                    this.lineWidth = 2;
                    this.arc(obj.x, obj.y, obj.s, 0, 2 * Math.PI * (obj.h / flagH));
                    this.strokeStyle = '#ff000020';
                    this.stroke();
                    this.lineWidth = 1;
                }

                this.beginPath();
                this.cirRct(x - l * 0.37, y - l * 0.37, l * 0.75, l / 2, 0, obj.color);
                this.beginPath();
                this.moveTo(x - l * 0.37 + 1, y + l * 0.15);
                this.lineTo(x - l * 0.37 + 1, y + l * 0.5);
                this.strokeStyle = '#fff';
                this.stroke();
                this.closePath();
                this.strokeStyle = '#000';
            }
            //画出炮弹
            CanvasRenderingContext2D.prototype.drawBullets = function (x, y, l, color) {
                if(!inEye(x, y)){return false;}
                var cov = this.globalCompositeOperation;
                this.globalCompositeOperation = 'lighter';
                this.beginPath();
                var gradient = this.createRadialGradient(x, y, l / 6, x, y,l / 2);
                gradient.addColorStop(0,"#ddea0d");
                gradient.addColorStop(0.1,"#bd6651");
                gradient.addColorStop(0.3,"#aa1111d3");
                gradient.addColorStop(1,"#aa111100");
                this.fillStyle = gradient;
                this.arc(x, y, l / 2, 0, 2 * Math.PI);
                this.fill();
                this.closePath();
                this.globalCompositeOperation = cov;
//                this.stroke();
                return false;
            }
            //画出道具
            CanvasRenderingContext2D.prototype.drawProp = function (x, y, l, index) {
                if(!inEye(x, y)){return false;}
                this.cirRct(x, y, l, l, 1, randomProp[index].c);
                this.fillStyle = '#000';//设置字体颜色
                this.textAlign = 'center';
                this.textBaseline = 'middle';
                this.font = '8px Adobe Ming Std';
                this.fillText(randomProp[index].t, x + l / 2, y + l / 2);
            }
            //标记道具
            function markProp() {
                setTimeout(function () {
                    var _ttl = 10*8000;
                    var randomx = Math.floor(Math.random() * (canvas.width - propLength)),
                            randomy = Math.floor(Math.random() * (canvas.height - propLength)),
                            randomt = Math.floor(Math.random() * randomProp.length);
                    propscc = propscc > propsccz ? 0 : propscc;
                    var _pl = propscc++;
                    props[_pl] = {x: randomx, y: randomy, t: randomt};
                    setTimeout(function () {
                        props[_pl].show=0;
                        props[_pl].x=-1000;
                        props[_pl].y=-1000;
                    }, _ttl);
                    markProp();
                }, 8000);
            }
            //建筑铁块
            function FeContrust() {
                for (var i = 0, len = Fes[pic].length; i < len; i++)
                {
                    context.cirRct(Fes[pic][i].x * Felength, Fes[pic][i].y * Felength, Felength, Felength, 0, '#666');
                }
            }



            //计算剩余存活的坦克数量
            function AIalive() {
                var a = 0;
                for (var i = 0, len = tanksAi.length; i < len; i++)
                {
                    if (tanksAi[i].h >= 0)
                        a++;
                }
                return a;
            }
            function inEye(x,y){
                if((Math.abs(x-tanks[tanki].x) < 400) && (Math.abs(y-tanks[tanki].y) < 400)){
                    return true;
                }
                return false;
            }
            //游戏开始
            var afpstimestamp = new Date() . getTime();
            function gameHandle() {
                afpstimestamp = new Date() . getTime();
                context.cirRct(0, 0, canvas.width, canvas.height, 0, '#000');
                context.clearRect(0,0,canvas.width,canvas.height);
                FeContrust();
                codeChange();
                var target = getTarget(tanki);
                for (var i = 0, fglen = flags.length; i < fglen; i++)
                {
                    context.drawFlag(flags[i]);
                    if (target.obj === flags[i]) {
                        context.drawTankF(flags[i]);
                    }
                    if(flags[i].lead == 1){
                        continue;
                    }
                    var arr = [tanksAi, tanks];
                    $.each(arr, function (a, tanks) {
                        for (var j = 0; j < tanks.length; j++) {
                            if (flags[i].team == tanks[j].team) {
                                continue;
                            }
                            if ((Math.abs(tanks[j].x - flags[i].x) <= flags[i].s) && (Math.abs(tanks[j].y - flags[i].y) <= flags[i].s)) {
//                            if (l(tanks[j].x, tanks[j].y, flags[i].x, flags[i].y) <= flags[i].s) {
                                shot(flags[i], tanks[j]);
                                _sh = 1;
                                return false;
                            }
                        }
                    });
                }
                if (props.length > 0)
                {
                    for (var j = 0, plen = props.length; j < plen; j++)
                    {
                        context.drawProp(props[j].x, props[j].y, propLength, props[j].t);
                    }
                }
                for (var i = 0, len = tanks.length; i < len; i++)
                {
                    context.drawTank(tanks[i]);
                    if (target.obj === tanks[i]) {
                        context.drawTankF(tanks[i]);
                    }
                    playerTanksMove(i);
                }
                for (var j = 0, blen = bullets.length; j < blen; j++)
                {
                    if(!bullets[j]){
                        continue;
                        var a=1;
                    }
                    if(!bullets[j].show){
                        var a=1;
                    }
                    if (bullets[j].show == 1) {
                        context.drawBullets(bullets[j].x, bullets[j].y, bullets[j].l, bullets[j].color);
                    }
                }
                for (var k = 0, alen = tanksAi.length; k < alen; k++)
                {
                    if (tanksAi[k].show == 1) {
                        context.drawTank(tanksAi[k]);
                        if (target.obj === tanksAi[k]) {
                            context.drawTankF(tanksAi[k]);
                        }
                    }
                }
                if (tanksAi.length > 0)
                    AImove();
                if (!end)
                {
                    $.each(bulletFlag, function(i,v){
                        updateFlagi(i, flags[i]);
                    });
                    bulletFlag = {};
                    window._sock.sendMsg(1);
                    var bfpstimestamp = new Date() . getTime();
                    var waittime = (bfpstimestamp - afpstimestamp) >= 7 ? 0 : (8 - (bfpstimestamp - afpstimestamp));
//                    console.log(afpstimestamp, bfpstimestamp, waittime);
                    setTimeout(function () {
                        gameHandle();
                        fps++;
                    }, waittime);
                    var _i=0;
                }
                else
                {
                    setTimeout(function () {
                        bullets.length = 0;
                        tanksAi.length = 0;
                    }, 1000)
                }
            }
            function racestart(){
                _initTanks();
                gameHandle();
                //todo:开启后整体移动速度会减慢
//                markProp();
                tankAiProduce();
            }
            //fps显示
            $('<div id="dbg1" style="position:absolute;right:0;top:0;z-index:0;color:#fff;text-align:right;"></div>').prependTo('#cvout')
            $('<p>fps: <span id="fps"></span></p>').prependTo('#dbg1')
            $('<p>sendCount - revCount: <span id="sendRevCount"></span></p>').prependTo('#dbg1')
            var fps=0;
            setInterval(function(){
                $('#fps').html(fps)
                fps=0;
                $('#sendRevCount').html(window.sendJsonsCount)
            }, 1000);
            // 后退的所有动作。包括 键盘、鼠标手势等产生的后退动作
            history.pushState(null, null, document.URL);
                window.addEventListener('popstate', function () {
                history.pushState(null, null, document.URL);
            });
        </script>
        <script>
            window.onbeforeunload = function() {
                return 'unload';
            };
            //主服务器
            window.$sersock = -1;
            window.$session = -1;
            window._sock = {sendMsg:0};
            (function (window) {
                var inittimestamp = new Date() . getTime();
//                var wsServer = 'ws://192.168.2.101:8080';
//                var wsServer = 'ws://192.168.118.220:8080';
                var wsServer = 'ws://122.114.76.193:12345';
                var ws = new WebSocket(wsServer);
                var isConnect = false;
                ws.onopen = function (evt) {
                    onOpen(evt)
                };
                ws.onclose = function (evt) {
                    onClose(evt)
                };
                ws.onmessage = function (evt) {
                    onMessage(evt)
                };
                ws.onerror = function (evt) {
                    onError(evt)
                };
                function onOpen(evt) {
                    console.log("连接服务器成功");
                    isConnect = true;
                    $json = ['session',inittimestamp];
                    sendMsg($json, 1);
                }
                function onClose(evt) {
                    isConnect = false;
                    window.end = true;
                    console.log("Disconnected");
                }
                function onMessage(evt) {
//                    console.log('Retrieved data from server: ', evt.data);
                    window.sendJsonsCount--;
                    var data = JSON.parse(evt.data);
                    $.each(data, function(i,v){
                        v.wscount = v.wc;
                        wsrouter.init(v);
                    });
                }
                function onError(evt) {
                    console.log('Error occured: ' + evt.data);
                }
                
                window.sendJsons = [];
                window.sendJsonsCount = 0;
                function sendMsg($json) {
                    if($json !== 1){
                        if(!window.sendJsons){
                            window.sendJsons = [];
                        }
                        window.sendJsons[window.sendJsons.length] = $json;
                        if(arguments[1] === 1){
                            sendMsg(1);
                        }
                    }else{
                        if(window.sendJsons.length > 0){
                            var vj = JSON.stringify(window.sendJsons);
                            window.sendJsons = [];
                            if (isConnect) {
                                window.sendJsonsCount++;
                                ws.send(vj);
                            }
                        }
                    }
                }
                var _sock = {sendMsg:sendMsg};
                window._sock = _sock;
                
                var wsrouter = {
                    init:function(data){
                        if(data.wscount){
                            $('#wscountdiv').html('当前在线人数：' + data.wscount);
                        }
                        if(!data[0]){
                            console.log('data._func:none ', data);
                            return false;
                        }
                        var _func = data[0];
                        if(!wsrouter[_func]){
                            console.log('wsrouter._func:none ', data);
                            return false;
                        }
                        wsrouter[_func](data);
                    },
                    session:function(data){
                        data.session = data[1];
                        if(data.session == inittimestamp){
                            window.$session = data.wsid;
                            if(data.wscount == 1){
                                window.$sersock = data.wsid;
                            }else{
                                this._getsersock();
                            }
                        }
                    },
                    _getsersock:function(){
                        var json = ['getsersock'];
                        _sock.sendMsg(json, 1);
                    },
                    _setsersock:function(){
                        var json = ['setsersock',window.$sersock];
                        _sock.sendMsg(json, 1);
                    },
                    getsersock:function(data){
                        if(window.$sersock == window.$session){
                            this._setsersock();
                        }
                    },
                    setsersock:function(data){
                        data.sersock = data[1];
                        window.$sersock = data.sersock;
                    },
                    sersockScore:0,
                    sersockRace:function(data){
                        var score = data[1];
                        if(score > this.sersockScore){
                            window.$sersock = data.wsid;
                            setTimeout(function(){
                                this.sersockScore=0;
                            }, 10000);
                        }
                    },
                    test:function(data){
                        var time = new Date() . getTime();
                        console.log(time, data.posttime, time - data.posttime);
                    },
                    user_add:function(data){
                        console.log('user_add ', data);
                    },
                    user_close:function(data){
                        console.log('user_close ', data);
                        if(window.$sersock == data.wsid){
                            var json = ['sersockRace',Math.ceil(Math.random()*1000000)];
                            _sock.sendMsg(json, 1);
                        }
                    },
                    join:function(data){
                        data.selectId = data[1];
                        $('#joindiv select [value='+ data.selectId +']').eq(0).remove();
                        if(window.$session == data.wsid){
                            window.tanki = data.selectId;
                            $('#startdiv').show();
                            $('#startdiv>button').show();
                            $('#joindiv').hide();
                        }
                        playerConf[data.selectId].p = 1;
                        $('#startdiv #joinlist').html($('#startdiv #joinlist').html() + '<p class="joinp" data-wsid="' + data.wsid + '">tanki:' + data.selectId + ' => wsid:' + data.wsid + '</p>');
                    },
                    start:function(data){
                        if(!this.startcount){
                            this.startcount = 0;
                        }
                        this.startcount++;
                        $('.joinp[data-wsid="' + data.wsid + '"]').html($('.joinp[data-wsid="' + data.wsid + '"]').html() + ' 已准备就绪');
                        if(this.startcount == data.wscount){
                            var _t = 3;
                            var intva = setInterval(function(){
                                if(_t > 0){
                                    $('#startdiv #joinlist').html($('#startdiv #joinlist').html() + '<p>全部已准备就绪，' + _t + '秒后进入战场</p>');
                                    _t--;
                                }
                            }, 1000);
                            setTimeout(function(){
                                clearInterval(intva);
                                $('#startdiv').hide();
                                $('#htmldiv').hide();
                                racestart();
                            }, (_t+1) * 1000);
                        }
                    },
                    setXYto:function(data){
                        data.tanki = data[1];
                        data.xto = data[2];
                        data.yto = data[3];
                        if(window.$session != data.wsid){
                            setXYto(data.tanki, data.xto, data.yto);
                        }
                    },
                    resetXYto:function(data){
                        data.tanki = data[1];
                        if(window.$session != data.wsid){
                            resetXYto(data.tanki);
                        }
                    },
                    setTarget:function(data){
                        data.tanki = data[1];
                        data.xto = data[2];
                        data.yto = data[3];
                        if(window.$session != data.wsid){
                            setTarget(data.tanki, data.xto, data.yto);
                        }
                    },
                    resetTarget:function(data){
                        data.tanki = data[1];
                        if(window.$session != data.wsid){
                            resetTarget(data.tanki);
                        }
                    },
                    updateTanki:function(data){
                        data.tanki = data[1];
                        data.tank = data[2];
                        if(window.$session != data.wsid){
                            updateTanki(data.tanki,data.tank);
                        }
                    },
                    updateFlagi:function(data){
                        data.flagi = data[1];
                        data.flag = data[2];
                        if(window.$session != data.wsid){
                            updateFlagi(data.flagi,data.flag);
                        }
                    },
                    shot:function(data){
                        data.bullet = data[1];
                        _shot(data.bullet);
                    },
                    jnshot:function(data){
                        jnshot(data[1], data[2], data[3]);
                    }
                };
                
//                $json = {_func:'test',posttime : new Date() . getTime()};
//                sendMsg($json);
            })(window);
        </script>
        <script>
            (function(){
                var joinOption = '';
                for(var i=0;i<10;i++){
                    joinOption += '<option value="'+ i +'">'+ i +'</option>';
                }
                $('#joindiv select').html(joinOption);
                $('#joindiv button').click(function(){
                    var selectId = $('#joindiv select').val();
                    var json = ['join',selectId];
                    _sock.sendMsg(json, 1);
                });
                $('#startdiv button').click(function(){
                    $('#startdiv button').hide();
                    var json = ['start'];
                    _sock.sendMsg(json, 1);
                });
            })();
        </script>
    </body>
</html>
